<template>
  <div class="home">
    <el-container class="Box">
      <el-header class="titlebox" height="120px">
        <div class="LogoBox">
          <img src="../assets/img/logo.jpg">
          <div style="display:inline-block">
            <div style="font:700 30px/60px microsoft yahei;color:#666">二手手机交易平台</div>
            <span style="color:#aaa;padding-left:80px">二手优品，信誉保证</span>
          </div>
        </div>
        <!-- 搜索框 -->
        <div class="Inputbox">
          <el-input
          class="input"
          placeholder="请输入手机型号..."
          prefix-icon="el-icon-search"
          v-model="text"
          @keyup.native.enter="comeSelect(text)">
          </el-input>
        </div>
        <!-- 登录状态 -->
        <div class="Menubox">
          <div v-if="finish">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                我的<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">个人中心</el-dropdown-item>
                <el-dropdown-item command="b">我的商店</el-dropdown-item>
                <el-dropdown-item command="c">我的订单</el-dropdown-item>
                <el-dropdown-item command="d">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div v-else>
            <el-link type="primary" @click="Gologin">登录</el-link>
            &nbsp;&nbsp;
            <el-link type="info" @click="Goregister">注册</el-link>
          </div>
        </div>
      </el-header>
      <el-main class="mainbox">
        <div class="topbox">
          <!-- <el-row :gutter="15"> -->
            <div class="leftMenu">
            <!-- 侧边导航栏 -->
              <el-menu
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              :unique-opened="true"
              @select="brandSelet"
              >
                <div v-for="item in menulist" :key="item.id">
                  <el-submenu
                  :index="item.id.toString()"
                  :show-timeout="3000"
                  :hide-timeout="3000">
                      <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span @click="comeBrand(item.id)" class="titleText">{{item.name}}</span>
                      </template>
                    <div v-for="mess in seriesList" :key="mess.id">
                      <el-menu-item-group>
                        <el-menu-item :index="mess.id.toString()">{{mess.name}}</el-menu-item>
                      </el-menu-item-group>
                    </div>
                  </el-submenu>
                </div>
              </el-menu>
            </div>
            <div class="slidePic">
            <!-- 轮播图 -->
              <el-carousel trigger="click" height="350px" style="margin-top:10px">
                <el-carousel-item v-for="item of slideList" :key="item.id">
                  <img :src="baseurl+item.picpath">
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="Bnotice">
            <!-- 公告栏 -->
              <el-collapse v-model="activeName" accordion class="noticeBox">
                <div class="NoticeText">公告栏</div>
                <div v-for="item in noticelist" :key="item.id">
                  <el-collapse-item :title="item.title" :name="item.id.toString()" style="padding-left:5px">
                    <div style="color:#777">{{item.content}}</div>
                  </el-collapse-item>
                </div>
              </el-collapse>
          </div>
          <!-- </el-row> -->
        </div>
        <div class="bottombox">
          <div style="height:40px">
          <!-- 筛选栏 -->
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-submenu index="1-1">
                <template slot="title" class="slot">综合</template>
                <el-menu-item index="0">降序</el-menu-item>
              </el-submenu>
              <el-submenu index="2-1">
                <template slot="title" class="slot">价格</template>
                <el-menu-item index="1">降序</el-menu-item>
                <el-menu-item index="2">升序</el-menu-item>
              </el-submenu>
              <el-submenu index="3-1">
                <template slot="title" class="slot">信誉</template>
                <el-menu-item index="3">降序</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
          <!-- 商品列表 -->
          <div class="Main-Box">
            <div  v-for="item of goodsList" :key="item.id" @click="comeDetail(item.id)">
              <div class="ImgBox"><img :src="baseurl+item.picpath"></div>
              <div style="padding:5px 5px 5px 5px">
                <div class="price">￥&nbsp;<span style="font-weight:700;font-size:26px">{{item.price}}</span></div>
                <div class="message">
                  <span>【{{item.percentage}}】</span>
                  {{item.title}}
                </div>
                <div style="text-align:right">
                  <span class="selfman">{{item.username}}</span>
                  <span class="credit">信誉:&nbsp;<span>{{item.reputation}}</span></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页组件 -->
        <div class="page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNow"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
	return {
    finish: true,
    activeName:'1',
    menulist: [],
    noticelist: [],
    slideList: [],
    seriesList: [],
    goodsList: [],
    activeIndex: '1-1',
    total: -1,
    pageSize: 12,
    pageNow: 1,
    text: '',
    status: '',
    brand: '',
    series: '',
    url: '',
    baseurl: 'http://123.56.11.253:8181/transaction/'
	}
  },
  components: {},
  methods: {
    // 展开菜单栏
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
      this.getSeriesList(key)
      // this.brand = Number(key)
      // console.log('一级',this.brand)
    },
    // 点击导航栏一级标题进行筛选
    comeBrand (id) {
      this.$router.push({path: '/selectmess',query:{brandId: id}})
      // let routeData = this.$router.resolve({path: '/selectmess',query:{brandId: id}})
      // window.open(routeData.href, '_blank')
    },
    // 收起菜单栏
    handleClose (key, keyPath) {
      this.brand = ''
      this.series = ''
      this.getGoodsList()
    },
    // 选择筛选状态
    handleSelect(key, keyPath) {
       this.status = key
       this.getGoodsList()
    },
    // 选择品牌或者系列
    brandSelet (key, keyPath) {
      this.brand = ''
      this.series = Number(key)
      console.log("二级",this.series)
      this.$router.push({path: '/selectmess',query:{reriesId: this.series}})
      // let routeData = this.$router.resolve({path: '/selectmess',query:{reriesId: this.series}})
      // window.open(routeData.href, '_blank')
    },
    // 登录
    Gologin () {
      this.$router.push({name: 'login',params:{user: true}})
    },
    // 注册
    Goregister () {
      this.$router.push({name: 'register',params:{user: true}})
    },
    // 进入商品详情页
    comeDetail (id) {
       this.$router.push({name: 'detail',query:{detailId: id}})
      // let routeData = this.$router.resolve({name: 'detail',query:{detailId: id}})
      // window.open(routeData.href, '_blank')
      console.log(id)
    },
    // 搜索框进入搜索页面
    comeSelect (text) {
      this.$router.push({path: '/selectmess',query:{text: text}})
      // let routeData = this.$router.resolve({path: '/selectmess',query:{text: text}})
      // window.open(routeData.href, '_blank')
    },
    // 获取公告
    async getNoticeList () {
      const res = await this.$http.get('brand/selectAll?pageNow=1&pageSize=20')
      console.log(res)
      const { status, msg, data:{records}} = res.data
      if (status === 200) {
        this.menulist = records
      } else {
        console.log(msg)
      }
    },
    // 获取菜单栏
    async getMenuList () {
      const res = await this.$http.get('notice/list?pageNow=1&pageSize=20')
      console.log(res)
      const { status, msg, data:{records}} = res.data
      if (status === 200) {
        this.noticelist = records
      } else {
        console.log(msg)
      }
    },
    // 获取轮播图
    async getSlideShow () {
      const res = await this.$http.get('slideshow/list')
      console.log(res)
      const { status, msg, data} = res.data
      if (status === 200) {
        this.slideList = data
        // console.log(this.slideList)
      } else {
        console.log(msg)
      }
    },
    // 获取系列信息
    async getSeriesList (key) {
      const res = await this.$http.get(`series/selectAllByBrand?parent=${key}&pageNow=1&pageSize=20`)
      console.log(res)
      const { status, msg, data:{records}} = res.data
      if (status === 200) {
        this.seriesList = records
      } else {
        console.log(msg)
      }
    },
    // 获取商品信息
    async getGoodsList () {
      if (this.text) {
        this.url = `goods/list?text=${this.text}&pageNow=${this.pageNow}&pageSize=${this.pageSize}`
      } else if(this.status) {
        this.url = `goods/list?status=${this.status}&pageNow=${this.pageNow}&pageSize=${this.pageSize}`
      } else if (this.brand) {
        this.url = `goods/list?brand=${this.brand}&pageNow=${this.pageNow}&pageSize=${this.pageSize}`
      } else if (this.series) {
        this.url = `goods/list?series=${this.series}&pageNow=${this.pageNow}&pageSize=${this.pageSize}`
      } else {
        this.url = `goods/list?pageNow=${this.pageNow}&pageSize=${this.pageSize}`
      }
      // console.log(this.url)
      const res = await this.$http.get(this.url)
      console.log(res)
      const { status, msg, data:{records,total}} = res.data
      if (status === 200) {
        this.goodsList = records
        this.total = total
      } else {
        console.log(msg)
      }
    },
    // 分页组件
    handleCurrentChange (val) {
      this.pageNow = val
      // console.log(`当前页: ${val}`)
      this.getGoodsList()
    },
    handleSizeChange (val) {
      this.pageSize = val
      // console.log(`每页 ${val} 条`)
      this.getGoodsList()
    },
    // 判断是否已登录
    IsLoginOrNot () {
      const isNoN = sessionStorage.getItem('usertoken')
      // console.log(isNoN)
      if (isNoN) {
        this.finish = true
      } else {
        this.finish = false
      }
      // console.log(this.finish)
    },
    // 顶部下拉菜单选择触发的事件
    handleCommand(key) {
      if (key === 'a') {
        // 进入个人中心页面
        console.log('a')
        this.$router.push({path: '/mymessage'})
        // let routeData = this.$router.resolve({path: '/mymessage'})
        // window.open(routeData.href, '_blank')
      } else if(key === 'b') {
        // 进入我的商店页面
        console.log('b')
        this.$router.push({path: '/mystore'})
        // let routeData = this.$router.resolve({path: '/mystore'})
        // window.open(routeData.href, '_blank')
      } else if(key === 'c') {
        // 进入我的订单页面
        console.log('c')
        this.$router.push({path: '/myorder'})
        // let routeData = this.$router.resolve({path: '/myorder'})
        // window.open(routeData.href, '_blank')
      } else if (key === 'd') {
        // 退出登录
        this.$http.get('user/logout').then((res) => {
          console.log(res)
          if (res.data.status === 200) {
            this.$message.success('退出成功！')
            this.finish = false
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    }
},
  created () {
    this.IsLoginOrNot()
    this.getMenuList()
    this.getNoticeList()
    this.getSlideShow()
    this.getGoodsList()
    // this.getuser()
  }
}
</script>

<style scope lang="stylus">
.Box
  height 100%
  background-color #f2f2f2
  min-width 1525px
  .titlebox
    background-color #fff
    // background-color red
    display flex
    justify-content center
    align-items center
    overflow hidden
    padding-bottom 2%
    border-bottom solid 1px #ccc
    padding-top 10px
    .LogoBox
      width 40%
      min-width 400px
      img
        padding 1% 2% 0 20%
        width 100px
        height 100px
        vertical-align text-bottom
    .Inputbox
      width 40%
      padding-top 4%
      padding-left 5%
      min-width 400px
      .input
        width 400px
    .Menubox
      width 20%
      padding-top 6%
      text-align right
      padding-right 10%
      min-width 100px
  .mainbox
    padding 1% 10% 0 10%
    .topbox
      height 500px
      border-bottom solid 4px #aaa
      min-width 1200px
      .leftMenu
        display inline-block
        width 300px
        padding 0 15px 0 10px
        vertical-align top
        .el-menu-vertical-demo
          height 450px
          overflow auto
          border-radius 4px
          border 1px solid #ddd
      .slidePic
        display inline-block
        width 600px
        padding-right 15px
        vertical-align top
        img 
          height 350px
          cursor pointer
          width 100%
      .Bnotice
        display inline-block
        width 260px
        .noticeBox
          height 380px
          background-color #fff
          padding-left 15px
          padding-right 10px
          border-radius 4px
          border 1px solid #ddd
          .NoticeText
            padding 15px 0 5px 0
            font 700 20px/30px microsoft yahei
            color #666
    .bottombox
      padding-bottom 0
      min-height 800px
      min-width 1200px
      .el-menu
        height 40px
        line-height 40px
        width 280px
        .el-submenu__title
          height 40px !important
          line-height 40px !important
        .el-submenu__title:focus,.el-submenu__title:hover
          height 40px !important
          line-height 40px !important
        .el-menu--horizontal .el-menu .el-menu-item
          float none
          height 23px
          line-height 23px
          width auto !important
      .Main-Box>div
        display inline-block
        margin 5px 10px 5px 10px
        width 285px
        height 400px
        background-color #fff
        .ImgBox
          margin 5px 2% 5px 2%
          background-color #f1f1f1
          text-align center
          img
            width 100%
            height 260px
            cursor pointer
        .price
          color orange
          font-weight 700
          font-size 20px
          line-height 40px
          padding-left 10px
        .credit
          color red
          padding-left 20px
          padding-right 10px
          font-size 14px 
        .message
          color #555
          font-size 16px
          line-height 22px
          padding 0 5px 0px 5px
          margin-bottom 10px
          height 46px
          overflow hidden
        .selfman
          color #888
          font-size 14px
.titleText:hover
  color #409EFF
.page
  text-align center
  padding 50px 0 30px 0
.el-dropdown-link
  cursor pointer
  // color #409EFF
.el-icon-arrow-down
  font-size 14px
</style>
